<template>
  <el-container>
    <el-main>
      <div class="title_box">
        <span class="title">&nbsp;{{year}}&nbsp;</span>
      </div>
      <div class="result_box">
        <el-row :gutter="24">
          <el-col :span="6" v-for="item in resultList" :key="item.id">
            <el-card shadow="hover">
              <div slot="header" class="clearfix">
                <span class="title">{{item.classes.name}}</span>
              </div>
              <div class="course" v-for="course in item.courseList" :key="course.id">
                <router-link :to="{name:'gradePage',params:{classesId:item.classes.id,courseId:course.id,year:year}}" class="link" >{{course.name}}</router-link>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {queryMyExam} from "@/api/exam";

export default {
  name: "ResultInput",
  data(){
    return{
      user: JSON.parse(sessionStorage.getItem("user")),
      resultList: [],
      year: '',
    }
  },
  created() {
    this.load();
  },
  methods:{
    load(){
      queryMyExam({teacherId:this.user.id}).then(res => {
        console.log(res)
        this.resultList = res.data.data;
        this.year = res.data.year;
      })
    },
  },
}
</script>

<style lang="less" scoped>

.result_box{
  width: 100%;
  //background-color: #62d1ff;
  .el-card{
    background-color: #f5f5f5;
    margin-bottom: 20px;
    height: calc(40vh - 75px);
    text-align: center;
    .title{
      color: rgba(161, 21, 21, 0.99);
      font-size: 20px;
      font-weight: bolder;
    }
    .course{
      color: gray;
      font-weight: bold;
      margin-bottom: 10px;

    }
  }
}

.link{
  cursor: pointer;
  color: gray;
  font-weight: bold;
  text-decoration: none;
}

.link:hover{
  color: gold;
}

.title_box{
  margin-bottom: 20px;
  text-align: center;
  .title{
    font-family: 华文行楷,serif;
    font-weight: bold;
    border: solid 1px #eee;
    border-radius: 3%;
    padding: 5px;
    //外圈阴影
    box-shadow: 0 0 10px #ddd;
    color: gray;
    font-size: 40px;
  }
}

.el-card /deep/ .el-card__body {
  padding: 6px;
}
.el-card /deep/ .el-card__header {
  padding: 8px 20px;
  border-bottom: 1px solid #EBEEF5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
  background-color: lightgrey;
}

</style>